<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:fmt="http://java.sun.com/jsp/jstl/fmt"
      xmlns:stripes="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <title>MyPetStore</title>
  <link rel="StyleSheet" href="css/mypetstoreNew.css" type="text/css" media="screen"/>
  <link rel="stylesheet" href="css/cart.css">
</head>
<body>
<div th:replace="common/top"></div>

<div class="crumb">
  <div class="w">
    <div class="crumb-content">
      <a href="/mainForm" class="link">MyPetStore</a>
      <span>></span>
      <span class="link-text">Cart</span>
      <span id="BackLink" class="Backlink">
        <a href="/mainForm">
          Return to Main Menu
        </a>
      </span>
    </div>
  </div>
</div>

<div id="Catalog">

  <div id="Cart">

    <div class="page-wrap w">
      <div class="panel">
        <h2><i class="fa-solid fa-cart-shopping">Shopping Cart</i></h2>
        <div class="panel-title"></div>
        <div class="panel-body">
          <form action="deleteSeleted" id="updatecart" method="post" >
            <table class="product-top-table">
              <tr>
                <th class="cell-img">Images</th>
                <th class="cell-itemid">Item ID</th>
                <th class="cell-productid">Product ID</th>
                <th class="cell-desp">Description</th>
                <th class="cell-stock">In Stock?</th>
                <th class="cell-quantity">Quantity</th>
                <th class="cell-listprice">List Price</th>
                <th class="cell-totalprice">Total Cost</th>
                <td class="cell-remove">Operation</td>
              </tr>
            </table>

            <table class="product-table" id="product-table">
              <tr th:each="cartItem:${cart}">
                <td class="cell-img">
                  <div class="checkbox">
                    <input type="checkbox" class="checkboxes">
                    <a th:href="@{/itemForm(itemId=${cartItem.itemId})}">
                      <img th:src="${cartItem.getImgPath()}" class="product-img">
                    </a>
                  </div>
                </td>
                <td class="cell-itemid">
                  <a th:href="@{/itemForm(itemId=${cartItem.itemId})}" class="link" th:text="${cartItem.itemId}"></a>
                </td>
                <td class="cell-productid" th:text="${cartItem.productId}"></td>
                <td class="cell-desp" th:text="${cartItem.getDescription()}"></td>
                <td class="cell-stock" th:text="${cartItem.inStock}"></td>
                <td class="cell-quantity">
                  <span><button type="button" id="sub" class="cell-quantity-button">-</button></span>
                  <span>&nbsp;</span>
                  <span><input id="input" type="text" class="cell-quantity-input" th:name="${cartItem.itemId}" th:value="${cartItem.quantity}"></span>
                  <span>&nbsp;</span>
                  <span><button type="button" id="add" class="cell-quantity-btn">+</button></span>
                </td>
                <td  class="cell-listprice">
                  <fmt:formatNumber th:value="${cartItem.listPrice}" pattern="$#,##0.00" />
                </td>
                <td th:id="${cartItem.itemId}" class="cell-totalprice">
                  <fmt:formatNumber th:value="${cartItem.totalCost}" pattern="$#,##0.00" />
                </td>
                <td class="cell-remove">
                  <a th:href="@{removeCartItem(workingItemId=${cartItem.itemId})}" class="cell-removeButton">
                    Remove
                  </a>
                </td>
              </tr>
            </table>
            <table class="submit-content">
              <tr>
                <th class="nbs">&nbsp;</th>
                  <th class="sub-content-left">
                    <a href="#" class="fa-regular fa-trash-can"></a>
                    <input type="submit" class="delete" value="Delete Seleted">
                  </th>
                  <th class="nbsp">&nbsp;</th>

                  <th class="subtotal">Sub Total:</th>
                  <th id="total-price" class="total-price">
                    <fmt:formatNumber th:value="${subTotal}" pattern="$#,##0.00" />
                  </th>
                  <th>
                    <a href="newOrderForm" class="btn order-submit">Checkout</a>
                  </th>
              </tr>
            </table>
          </form>
        </div>
      </div>
    </div>




    <div id="Separator">&nbsp;</div>
  </div>

</div>

<script src="js/cart.js"></script>

<div th:replace="common/bottom"></div>
</body>
</html>